<template>
	<div class="auxiliary-menu" :style="{bottom: bottom+'rpx'}">
		<div class="menu-item" v-if="isPublish" @click="toPublish">
			<i class="icon-publish iconfont"></i>
			<text>发布</text>
		</div>

		<div class="menu-item" v-if="isBack" @click="toBack">
			<i class="icon-back iconfont"></i>
			<text>首页</text>
		</div>
	</div>
</template>

<script setup>
	import { useUserStore } from '@/store/user.js'

	const userStore = useUserStore()

	const props = defineProps({
		isBack: {
			type: Boolean,
			default: true
		},
		isPublish: {
			type: Boolean,
			default: true
		},
		bottom: {
			type: Number,
			default: 200
		}
	})

	function toBack() {
		uni.switchTab({ url: '/pages/index/index' })
	}

	function toPublish() {
		if (!userStore.token) return userStore.init();
		uni.navigateTo({
			url: '/pages/sub/main/publish/index'
		})
	}
</script>

<style lang="scss" scoped>
	$size: 110rpx;

	.auxiliary-menu {
		z-index: 9;
		width: $size;
		position: fixed;
		right: 40rpx;

		.menu-item {
			background: $uv-error;
			border-radius: 50%;
			width: $size;
			height: $size;
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 11px rgba(0, 0, 0, 0.12);

			.iconfont {
				color: #fff;
				font-size: 48rpx;
			}

			text {
				font-size: 24rpx;
				color: #fff;
				line-height: 1;
			}
		}
	}
</style>